<template>
  <view class="entertainment">
    <view style="padding: 0 20rpx">
      <Scroll-row
        :list="type"
        :current="queryForm.smallType"
        key-name="id"
        key-label="name"
        @click="handleStatus"
      />
      <view class="t-row">
        <u-icon
          name="arrow-down"
          :label="queryForm.start_time == '' ? '全部时间' : times"
          color="#3BA199"
          label-pos="left"
          label-size="26rpx"
          label-color="#3BA199"
          space="10rpx"
          @click="dateShow = true"
        />
        <u-icon
          name="arrow-down"
          :label="
            queryForm.price == ''
              ? '所有价格'
              : queryForm.price == 'free'
              ? '免费'
              : '收费'
          "
          color="#3BA199"
          label-pos="left"
          label-size="26rpx"
          label-color="#3BA199"
          space="10rpx"
          @click="priceShow = true"
        />
        <u-icon
          name="arrow-down"
          :label="
            queryForm.sort == 'price_rise'
              ? '价格升序'
              : queryForm.sort == 'price_fall'
              ? '价格降序'
              : queryForm.sort == 'heat_rise'
              ? '热度升序'
              : queryForm.sort == 'heat_fall'
              ? '热度降序'
              : '默认排序'
          "
          color="#3BA199"
          label-pos="left"
          label-size="26rpx"
          label-color="#3BA199"
          space="10rpx"
          @click="sortShow = true"
        />
      </view>
    </view>
    <Card-item
      v-for="(i, k) in dataList"
      :key="k"
      :index="i.id"
      :image="i.cover_img"
      :title="i.title"
      :bold="false"
      :sub-title="i.sketch"
      :bm-line="false"
      @click="handleDetail"
    >
      <view slot="center" v-if="i.labelAll.length">
        <view class="tag" v-for="tag in i.labelAll">{{ `#${tag}` }}</view>
      </view>
      <view slot="right" class="f-right">
        <view>
          <text>￥</text>
          <text>{{ i.price }}</text>
          <text>起</text>
        </view>
        <view class="f-sale"> {{ i.browse_num }}浏览</view>
      </view>
    </Card-item>
    <u-loadmore :status="status" height="80rpx" />
    <u-calendar
      :show="dateShow"
      color="#3BA199"
      mode="range"
      month-num="12"
      round="20"
      min-date="2023-01-01"
      :show-subtitle="false"
      show-cencel
      confirm-disabled-text="请选择日期范围"
      close-on-click-overlay
      allow-same-day
      @cancel="cancelDate"
      @close="dateShow = false"
      @confirm="confirmDate"
    />
    <u-action-sheet
      :show="priceShow"
      :actions="priceList"
      close-on-click-action
      safe-area-inset-bottom
      round="20"
      cancel-text="取消"
      @close="priceShow = false"
      @select="confirmPrice"
    />
    <u-action-sheet
      :show="sortShow"
      :actions="sortList"
      close-on-click-action
      safe-area-inset-bottom
      round="20"
      cancel-text="取消"
      @close="sortShow = false"
      @select="confirmSort"
    />
  </view>
</template>

<script>
import ScrollRow from "@/components/ScrollRow/index";
import CardItem from "@/components/CardItem/index";

import { homeActivityList } from "@/request/homeApi.js";
export default {
  components: { ScrollRow, CardItem },
  props: {
    // 活动类型
    type: {
      type: Array,
      default: () => {
        return [];
      },
    },
    index: {
      type: Number,
      default: 0,
    },
    page: {
      type: Number,
      default: 1,
    },
    // 搜索
    search: {
      type: String,
      default: "",
    },
  },
  watch: {
    type: {
      handler(v) {
        if (v.length) {
          if (this.index == 0) {
            this.queryForm.smallType = v[0].id;
            this.getDataList();
          }
        }
      },
      immediate: true,
      deep: true,
    },
    page(v) {
      if (v != this.queryForm.page) {
        this.queryForm.page = v;
        this.getDataList();
      }
    },
    search() {
      this.getDataList();
    },
  },
  computed: {
    times() {
      let start = this.queryForm.start_time.substr(5, 10);
      let end = this.queryForm.end_time.substr(5, 10);
      return `${start}~${end}`;
    },
  },
  data() {
    return {
      queryForm: {
        search: "", // 搜索
        price: "", // 选择价格
        bigType: "project", // 类型
        smallType: "", // 分类
        pageSize: 10, // 条数
        page: 1, // 页数
        start_time: "", // 开始时间
        end_time: "", // 结束时间
        sort: "", // 排序
      },
      total: 0, // 总数
      status: "loadmore", // 加载状态
      dateShow: false, // 日期弹窗显示
      dateValue: [], // 日期
      priceShow: false, // 价格弹窗显示
      priceList: [
        { name: "所有价格", value: "" },
        { name: "免费", value: "free" },
        { name: "收费", value: "charge" },
      ],
      sortShow: false, // 排序弹窗显示
      sortList: [
        { name: "默认排序", value: "" },
        { name: "价格升序", value: "price_rise" },
        { name: "价格降序", value: "price_fall" },
        { name: "热度升序", value: "heat_rise" },
        { name: "热度降序", value: "heat_fall" },
      ],
      dataList: [],
    };
  },
  created() {
    this.getDataList();
  },
  onReady() {
    this.$refs.datePicker.setFormatter(this.formatter);
  },
  methods: {
    // 格式化日期格式
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      if (type === "day") {
        return `${value}日`;
      }
      return value;
    },
    // 清空日期
    cancelDate() {
      this.queryForm.start_time = "";
      this.queryForm.end_time = "";
      this.dateValue = [];
      this.dateShow = false;
      this.handleSearch();
    },
    // 确认日期
    confirmDate(val) {
      this.queryForm.start_time = val[0];
      this.queryForm.end_time = val[val.length - 1];
      this.dateValue = val;
      this.dateShow = false;
      this.handleSearch();
    },
    // 确认排序
    confirmSort(val) {
      this.queryForm.sort = val.value;
      this.handleSearch();
    },
    // 确认价格
    confirmPrice(val) {
      this.queryForm.price = val.value;
      this.handleSearch();
    },
    // 切换状态
    handleStatus(v) {
      this.queryForm.smallType = v.id;
      this.handleSearch();
    },
    // 搜索
    handleSearch() {
      if (this.queryForm.page != 1) {
        this.$emit("changePage");
      } else {
        this.getDataList();
      }
    },
    // 跳转详情
    handleDetail(v) {
      uni.navigateTo({ url: "/pages/home/entertainmentDetail?id=" + v.id });
    },
    // 获取数据列表
    getDataList() {
      this.status = "loading";
      this.queryForm.search = this.search;
      homeActivityList(this.queryForm)
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.list;
            let page = this.queryForm.page;
            this.dataList = page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
            this.$emit("dataTotal", {
              index: 0,
              total: this.total,
              dataNum: this.dataList.length,
            });
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.entertainment {
  .t-row {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #d9d9d999;
    display: flex;
    justify-content: space-around;
    > view {
      flex: 1;
    }
  }
}
.tag {
  background-color: #e9f4f4;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
  border-radius: 40rpx;
  color: $active-color;
  font-size: 20rpx;
  display: inline-block;
}
.f-right {
  font-weight: 600;
  font-size: 28rpx;
  color: $active-color;
  margin-left: 20rpx;
  position: relative;
  text:nth-child(1) {
    font-size: 24rpx;
  }
  text:nth-child(2) {
    font-size: 40rpx;
  }
  .f-sale {
    position: absolute;
    top: 72rpx;
    right: 0;
    color: #979797;
    font-size: 20rpx;
    font-weight: normal;
  }
}
</style>
